<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="libs/angular/angular-material/angular-material.css">
    <link rel="stylesheet" href="libs/angular/angular-datatime-picker/material-datetimepicker.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <script src="libs/angular/angular/angular.js"></script>
    <script src="libs/angular/angular-animate/angular-animate.min.js"></script>
    <script src="libs/angular/angular-material/angular-material.js"></script>
    <script src="libs/angular/angular-aria/angular-aria.min.js"></script>

    <script src="libs/angular/angular-datatime-picker/angular-material-datetimepicker.min.js"></script>


    <script src="libs/angular/angular-message/angular-messages.min.js"></script>
    <script src="libs/angular/angular-message/angular-messages.js"></script>

    <!-- chart -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> -->

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
    <script src="//bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>
    <script src="js/index.js"></script>
    <!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> -->
    <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> -->
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge"> -->
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        /* .md-tab .ng-scope .ng-isolate-scope .md-ink-ripple {
            color: white;
        } */
        span.ng-scope {
            color: white;
        }

    </style>

</head>

<body style="background-color: rgb(17, 17, 71); color: white;">
    <div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill>
        <div ng-cloak layout="column" layout-fill>
            <md-toolbar>
                <div class="md-toolbar-tools">
                    <div class="flex-30">
                        <img src="./img/png/icon.png" style="height: 40px;width: 40px;">
                    </div>
                    <div class="flex-60">
                        <h2 class="md-title" layout="row" layout-align="center">城市大数据信息监测仿真平台</h2>
                    </div>
                    <div class="flex-30" layout="row" layout-align="end" ng-init="start()">
                        <p>
                            {{now|date:'yyyy-MM-dd HH:mm:ss'}}
                        </p>
                    </div>
                </div>
            </md-toolbar>
            <md-tabs flex layout="column" layout-fill>
                <md-tab label="可疑对象挖掘" layout-fill>
                    <md-content layout="column" layout-fill>
                        <div flex='24' layout="row">
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">对象<br>轨迹</h2>
                                        <md-radio-group class="flex-50" ng-change="addItem(radio.group1)"
                                            ng-model="radio.group1" layout="column" layout-align="center start"
                                            id="objTrace">
                                            <md-radio-button value="手机">手机</md-radio-button>
                                            <md-radio-button value="车牌">车牌</md-radio-button>
                                            <md-radio-button value="身份">身份</md-radio-button>
                                            <md-radio-button value="人脸">人脸</md-radio-button>
                                        </md-radio-group>
                                    </div>
                                </md-card>
                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">时间<br>约束</h2>
                                        <div flex='70' layout='column'>
                                            <span flex='50' layout="row" layout-align="top end"
                                                style=" margin-bottom: 5px;" ng-click="showAdvanced($event,'start')"
                                                ng-bind="start_time">
                                                2020-12-13 23:04
                                            </span>
                                            <span flex='50' layout="row" layout-align="top top"
                                                ng-click="showAdvanced($event,'end')" ng-bind="end_time">2021-01-13
                                                23:04</span>
                                        </div>
                                    </div>
                                </md-card>

                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">地域<br>约束</h2>
                                        <div class="flex-60" layout="column" layout-align="end start">
                                            <span layout="row" layout-align="end start"
                                                style="padding-bottom: 15px;  margin-left: 13px; font-weight: bold;"
                                                ng-click="showArea($event,'area')" ng-bind="area">
                                                北京
                                            </span>

                                            <h4 layout="row" layout-align="end start"
                                                style="margin-top: -5px;  margin-left: 10px;">
                                                <span class="material-icons">add_location_alt</span>&nbsp;&nbsp;&nbsp;
                                                <span class="material-icons ">edit</span>
                                            </h4>
                                        </div>
                                    </div>
                                </md-card>
                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row">
                                        <h2 class="flex-100" layout="row" layout-align="center center">挖掘对象<br>列表
                                        </h2>
                                    </div>
                                </md-card>
                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row">
                                        <h2 class="flex-100" layout="row" layout-align="center center">结果<br>统计</h2>
                                    </div>
                                </md-card>
                            </div>
                        </div>
                        <div flex='75' layout="row">
                            <div flex='60'>
                                <div id="container" layout-fill></div>
                            </div>
                            <div flex='40' layout="row" layout-fill>
                                <div flex='50' layout="column">
                                    <md-card flex="33" layout='row'>
                                        <div flex='20' layout="column">
                                            <span class="material-icons" flex='25' ng-click="nextIdCard()" style="text-align: center;">
                                                filter_4
                                            </span>
                                            <span class="material-icons" flex='25'  ng-click="nextIdCard()" style="text-align: center;">
                                                filter_6
                                            </span>
                                            <span class="material-icons" flex='25'  ng-click="nextIdCard()" style="text-align: center;">
                                                delete
                                            </span>
                                            <span class="material-icons" ng-click="nextIdCard()" flex='25' style="text-align: center;">
                                                arrow_upward
                                            </span>
                                        </div>
                                        <div flex='80'>
                                                    <md-button style="margin: 0;padding: 0;" layout="column"
                                                        layout-align='center center' layout-fill>
                                                        <img class="logo-image" ng-src="img/ids/id_{{img}}.jpg">
                                                    </md-button>
                                        </div>
                                    </md-card>
                                    <div flex="66">
                                        <md-card md-theme-watch layout-fill>
                                            <br><br>对象详细信息<br><br>
                                            姓名：{{ idInfo.name }}<br><br>
                                            身份证号: {{ idInfo.id }}<br><br>
                                            手机号: {{ idInfo.phone }}<br><br>
                                            住址: {{ idInfo.address }}
                                        </md-card>
                                    </div>
                                </div>
                                <div flex='50' layout="column">
                                    <div flex="33">
                                        <md-card md-theme-watch layout-fill>
                                            <md-button style="margin: 0;padding: 0;" layout="column"
                                                layout-align='center center' layout-fill>
                                                <img class="logo-image" src="img/png/tabler1-1.png">
                                            </md-button>
                                        </md-card>
                                    </div>
                                    <div flex="33">
                                        <md-card md-theme-watch layout-fill>
                                            <md-button style="margin: 0;padding: 0;" layout="column"
                                                layout-align='center center' layout-fill>
                                                <img class="logo-image" src="img/png/tabler2-1.png">
                                            </md-button>
                                        </md-card>
                                    </div>
                                    <div flex="33">
                                        <md-card md-theme-watch layout-fill>
                                            <md-button style="margin: 0;padding: 0;" layout="column"
                                                layout-align='center center' layout-fill>
                                                <img class="logo-image" src="img/png/tabler3-3.png">
                                            </md-button>
                                        </md-card>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </md-content>
                </md-tab>

                <md-tab label="关联对象分析">
                    <md-content layout="column" layout-fill>
                        <div flex='24' layout="row">
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">对象<br>轨迹</h2>
                                        <md-radio-group class="flex-50" ng-model="radio1.group1" layout="column"
                                            layout-align="center start" id="objTrace1">
                                            <md-radio-button value="手机">手机</md-radio-button>
                                            <md-radio-button value="车牌">车牌</md-radio-button>
                                            <md-radio-button value="身份">身份</md-radio-button>
                                            <md-radio-button value="人脸">人脸</md-radio-button>
                                        </md-radio-group>
                                    </div>
                                </md-card>
                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">时间<br>约束</h2>
                                        <div flex='70' layout='column'>
                                            <span flex='50' layout="row" layout-align="top end"
                                                style=" margin-bottom: 5px;" ng-click="showAdvanced($event,'start')"
                                                ng-bind="start_time">
                                                2020-12-13 23:04
                                            </span>
                                            <span flex='50' layout="row" layout-align="top top"
                                                ng-click="showAdvanced($event,'end')" ng-bind="end_time">2021-01-13
                                                23:04</span>
                                        </div>
                                    </div>
                                </md-card>

                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">地域<br>约束</h2>
                                        <div class="flex-60" layout="column" layout-align="end start">
                                            <span layout="row" layout-align="end start"
                                                style="padding-bottom: 15px;  margin-left: 13px; font-weight: bold;"
                                                ng-click="showArea($event,'area')" ng-bind="area">
                                                北京
                                            </span>

                                            <!-- <h4 layout="row" layout-align="end start"
                                                style="margin-top: 21px; margin-bottom: 21px; margin-left: 10px;">北京
                                            </h4> -->


                                            <h4 layout="row" layout-align="end start"
                                                style="margin-top: -5px;  margin-left: 10px;">
                                                <span class="material-icons">add_location_alt</span>&nbsp;&nbsp;&nbsp;
                                                <span class="material-icons ">edit</span>
                                            </h4>
                                        </div>
                                    </div>
                                </md-card>
                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row" layout-align="start">
                                        <h2 class="flex-30" layout="row" layout-align="center center">可疑<br>对象</h2>
                                        <div layout="column" id='relationObj'>
                                            <md-checkbox flex="25" style="margin-bottom: 0px;">直系</md-checkbox>
                                            <md-checkbox flex="25" style="margin-bottom: 0px;">亲属</md-checkbox>
                                            <md-checkbox flex="25" style="margin-bottom: 0px;">好友</md-checkbox>
                                            <md-checkbox flex="25" style="margin-bottom: 0px;">朋友</md-checkbox>
                                        </div>
                                    </div>
                                </md-card>
                            </div>
                            <div flex="20">
                                <md-card md-theme-watch>
                                    <div layout="row">
                                        <h2 class="flex-100" layout="row" layout-align="center center">结果<br>统计</h2>
                                    </div>
                                </md-card>
                            </div>
                        </div>
                        <div flex='75' layout="row">
                            <div flex='60'>
                                <div id="container1" layout-fill></div>
                            </div>
                            <div flex='40' layout="row" layout-fill>
                                <div flex='50' layout="column">
                                    <md-card flex="33" layout='row'>
                                        <div flex='20' layout="column">
                                            <span class="material-icons" flex='25'  ng-click="nextIdCard1()" style="text-align: center;">
                                                filter_4
                                            </span>
                                            <span class="material-icons" flex='25'  ng-click="nextIdCard1()" style="text-align: center;">
                                                filter_6
                                            </span>
                                            <span class="material-icons" flex='25' ng-click="nextIdCard1()" style="text-align: center;">
                                                delete
                                            </span>
                                            <span class="material-icons" ng-click="nextIdCard1()" flex='25' style="text-align: center;">
                                                arrow_upward
                                            </span>
                                        </div>
                                        <div flex='80'>
                                                    <md-button style="margin: 0;padding: 0;" layout="column"
                                                        layout-align='center center' layout-fill>
                                                        <img class="logo-image" ng-src="img/ids/id_{{img1}}.jpg">
                                                    </md-button>
                                        </div>
                                    </md-card>
                                    <div flex="66">
                                        <md-card md-theme-watch layout-fill>
                                            <br><br>对象详细信息<br><br>
                                            姓名：{{ idInfo1.name }}<br><br>
                                            身份证号: {{ idInfo1.id }}<br><br>
                                            手机号: {{ idInfo1.phone }}<br><br>
                                            住址: {{ idInfo1.address }}
                                        </md-card>
                                    </div>
                                </div>
                                <div flex='50' layout="column">
                                    <div flex="33">
                                        <md-card md-theme-watch layout-fill>
                                            <md-button style="margin: 0;padding: 0;" layout="column"
                                                layout-align='center center' layout-fill>
                                                <img class="logo-image" src="img/png/tabler1-1.png">
                                            </md-button>
                                        </md-card>
                                    </div>
                                    <div flex="33">
                                        <md-card md-theme-watch layout-fill>
                                            <md-button style="margin: 0;padding: 0;" layout="column"
                                                layout-align='center center' layout-fill>
                                                <img class="logo-image" src="img/png/tabler2-1.png">
                                            </md-button>
                                        </md-card>
                                    </div>
                                    <div flex="33">
                                        <md-card md-theme-watch layout-fill>
                                            <md-button style="margin: 0;padding: 0;" layout="column"
                                                layout-align='center center' layout-fill>
                                                <img class="logo-image" src="img/png/tabler3-3.png">
                                            </md-button>
                                        </md-card>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </md-content>
                </md-tab>
            </md-tabs>
        </div>
        <script type="text/ng-template" id="dialog1.tmpl.html"><md-dialog aria-label="Mango (Fruit)">
            <form ng-cloak>
              <md-toolbar>
                <div class="md-toolbar-tools">
                  <h2>选择时间</h2>
                  <span flex></span>
                  <md-button class="md-icon-button" ng-click="cancel()">
                    <span class="material-icons">
                        clear
                        </span>
                  </md-button>
                </div>
              </md-toolbar>
          
              <md-dialog-content>
                <div class="md-dialog-content"  layout="row">
                    <div ng-repeat="item in times">
                        <md-select  ng-model="item.select" >
                            <md-optgroup label="item.name">
                                <md-option ng-repeat="d in item.data" ng-value="d">{{d}}{{item.name}}</md-option>
                            </md-optgroup>
                        </md-select>
                        <!-- <span  layout="row" layout-align="center center">&nbsp;{{item.name}}&nbsp;</span> -->
                    </div>
                </div>
              </md-dialog-content>
          
              <md-dialog-actions layout="row">
                <span flex></span>
                <!-- <md-button ng-click="answer('not useful')">
                    <span class="ng-scope" style="color: black;">取消</span>
                </md-button> -->

                <md-button ng-click="answer('useful')">
                  <span class="ng-scope" style="color: black;">确认</span>
                </md-button>
              </md-dialog-actions>
            </form>
          </md-dialog>
          </script>

        <script type="text/ng-template" id="dialog.area.html"><md-dialog aria-label="Mango (Fruit)">
            <form ng-cloak>
              <md-toolbar>
                <div class="md-toolbar-tools">
                  <h2>选择地域</h2>
                  <span flex></span>
                  <md-button class="md-icon-button" ng-click="cancel()">
                    <span class="material-icons">
                        clear
                        </span>
                  </md-button>
                </div>
              </md-toolbar>
          
              <md-dialog-content>
                <div class="md-dialog-content"  layout="row">
                    <div layout-fill>
                        <md-select  ng-model="areas">
                            <md-optgroup label="areas" >
                                <md-option ng-repeat="d in area_array" ng-value="d">{{d}}</md-option>
                            </md-optgroup>
                        </md-select>

                    </div>
                </div>
              </md-dialog-content>
          
              <md-dialog-actions layout="row">
                <span flex></span>
                <md-button ng-click="answer('not useful')" style="color: black !important;">
                    <span class="ng-scope" style="color: black;">取消</span>
                </md-button>

                <md-button ng-click="answer('useful')">
                    <span class="ng-scope" style="color: black;">确认</span>
                </md-button>
              </md-dialog-actions>
            </form>
          </md-dialog>
          </script>
    </div>


</body>
<script>
    function loadJScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://api.map.baidu.com/api?type=webgl&v=1.0&ak=drGhos38GdxD7WMppGW4NdswaQVeXEhX&callback=init';
        document.body.appendChild(script);
    }
    //第一种，使用while循环
    function sleep(delay) {
        var start = (new Date()).getTime();
        while ((new Date()).getTime() - start < delay) {
            continue;
        }
    }

    let mapObj;

    function init() {
        // var map = new BMapGL.Map('container'); // 创建Map实例
        var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
        // map.centerAndZoom(point, 10);
        // map.enableScrollWheelZoom(); // 启用滚轮放大缩小
        var map = new BMapGL.Map('container', {
            enableDblclickZoom: false,
            displayOptions: {
                building: false
            }
        });

        mapObj = map;

        map.enableScrollWheelZoom(true);

        var map1 = new BMapGL.Map('container1', {
            enableDblclickZoom: false,
            displayOptions: {
                building: false
            }
        });

        map1.enableScrollWheelZoom(true);
        map1.setMapStyleV2({
            styleJson: styleJson2
        });
        map.setMapStyleV2({
            styleJson: styleJson2
        });


        // var bd = new BMapGL.Boundary();
        // bd.get('顺义区', function (rs) {
        //     // console.log('外轮廓：', rs.boundaries[0]);
        //     // console.log('内镂空：', rs.boundaries[1]);
        //     var hole = new BMapGL.Polygon(rs.boundaries, {
        //         fillColor: 'blue',
        //         fillOpacity: 0.2
        //     });
        //     // map.addOverlay(hole);
        //     map1.addOverlay(hole);
        // });
        setTimeout(function () {
            map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
            // map.centerAndZoom('乐平市', 14);  // 初始化地图,设置中心点坐标和地图级别
            map1.centerAndZoom(new BMapGL.Point(116.718, 40.142), 11);
        }, 1000);


        Array.from(document.getElementsByClassName("events")).forEach(function (item) {
            // console.log(item.id);
        });
        let current = 0
        setInterval(() => {
            let showMap = document.getElementById('objTrace').children
            const newArr = Array.from(showMap)
            // console.log(showMap)
            let i = 0
            newArr.forEach((item) => {
                i++
                // console.log(i, current)
                if (item.getAttribute('aria-checked') === "true" && current != i) {
                    current = i
                    // console.log('aria-checked', item.getAttribute('aria-checked'))
                    if (i == 1) {
                        console.log("i==2")
                        map.clearOverlays();

                        // longitude and latitude;
                        let start_longitude = 116.392115
                        let start_latitude = 39.916458
                        let range = 1
                        let lines = []
                        let lon = [start_longitude]
                        let lat = [start_latitude]
                        for (let i = 0; i < 12; i++) {
                            lon.push(start_longitude + Math.random() * range - 0.5)
                            lat.push(start_latitude + Math.random() * range - 0.5)
                            // lines.push(new BMapGL.Point(lon[i],lat[i]))
                        }

                        for (let i = 0; i < 4; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline);

                        lines = []
                        for (let i = 3; i < 6; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'red',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline1); //增加折线
                        lines = []
                        for (let i = 5; i < 7; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline1); //增加折线

                        map.centerAndZoom('北京市', 10); // 初始化地图,设置中心点坐标和地图级别
                        var bd = new BMapGL.Boundary();
                        bd.get('北京市', function (rs) {
                            var hole = new BMapGL.Polygon(rs.boundaries, {
                                fillColor: 'blue',
                                fillOpacity: 0.2
                            });
                            map.addOverlay(hole);
                        });
                       
                    }
                    if (i == 2) {
                        console.log("i==2")
                        map.clearOverlays();

                        // longitude and latitude;
                        let start_longitude = 115.8459
                        let start_latitude = 28.69877
                        let range = 1
                        let lines = []
                        let lon = [start_longitude]
                        let lat = [start_latitude]
                        for (let i = 0; i < 12; i++) {
                            lon.push(start_longitude + Math.random() * range - 0.5)
                            lat.push(start_latitude + Math.random() * range - 0.5)
                            // lines.push(new BMapGL.Point(lon[i],lat[i]))
                        }

                        for (let i = 0; i < 4; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline);

                        lines = []
                        for (let i = 3; i < 6; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'red',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline1); //增加折线
                        lines = []
                        for (let i = 5; i < 7; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline1); //增加折线

                        map.centerAndZoom('南昌市', 10); // 初始化地图,设置中心点坐标和地图级别
                        var bd = new BMapGL.Boundary();
                        bd.get('江西省', function (rs) {
                            var hole = new BMapGL.Polygon(rs.boundaries, {
                                fillColor: 'blue',
                                fillOpacity: 0.2
                            });
                            map.addOverlay(hole);
                        });
                    }
                    if (i == 3) {
                        map.clearOverlays();

                        // longitude and latitude;
                        let start_longitude = 117.220155
                        let start_latitude = 31.830798
                        let range = 1
                        let lines = []
                        let lon = [start_longitude]
                        let lat = [start_latitude]
                        for (let i = 0; i < 12; i++) {
                            lon.push(start_longitude + Math.random() * range - 0.5)
                            lat.push(start_latitude + Math.random() * range - 0.5)
                            // lines.push(new BMapGL.Point(lon[i],lat[i]))
                        }

                        for (let i = 0; i < 4; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline);

                        lines = []
                        for (let i = 3; i < 6; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'red',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline1); //增加折线
                        lines = []
                        for (let i = 5; i < 7; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline1); //增加折线

                        map.centerAndZoom('合肥市', 10); // 初始化地图,设置中心点坐标和地图级别
                        var bd = new BMapGL.Boundary();
                        bd.get('安徽省', function (rs) {
                            var hole = new BMapGL.Polygon(rs.boundaries, {
                                fillColor: 'blue',
                                fillOpacity: 0.2
                            });
                            map.addOverlay(hole);
                        });
                    }

                    if (i == 4) {
                        map.clearOverlays();

                        // longitude and latitude;
                        let start_longitude = 112.947195
                        let start_latitude = 28.234635
                        let range = 1
                        let lines = []
                        let lon = [start_longitude]
                        let lat = [start_latitude]
                        for (let i = 0; i < 12; i++) {
                            lon.push(start_longitude + Math.random() * range - 0.5)
                            lat.push(start_latitude + Math.random() * range - 0.5)
                            // lines.push(new BMapGL.Point(lon[i],lat[i]))
                        }

                        for (let i = 0; i < 4; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline);

                        lines = []
                        for (let i = 3; i < 6; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'red',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline1); //增加折线
                        lines = []
                        for (let i = 5; i < 7; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map.addOverlay(polyline1); //增加折线
                        map.centerAndZoom('长沙市', 10); // 初始化地图,设置中心点坐标和地图级别
                        var bd = new BMapGL.Boundary();
                        bd.get('湖南省', function (rs) {
                            var hole = new BMapGL.Polygon(rs.boundaries, {
                                fillColor: 'blue',
                                fillOpacity: 0.2
                            });
                            map.addOverlay(hole);
                        });
                    }
                }
            })
        }, 1000)

        let current1 = 0
        setInterval(() => {
            let showMap = document.getElementById('objTrace1').children
            const newArr = Array.from(showMap)
            // console.log(showMap)
            let i = 0
            newArr.forEach((item) => {
                i++
                // console.log(i, current)
                if (item.getAttribute('aria-checked') === "true" && current1 != i) {
                    current1 = i
                    // console.log('aria-checked', item.getAttribute('aria-checked'))
                    if (i == 1) {
                        map1.centerAndZoom(new BMapGL.Point(116.404, 39.915), 13); // 初始化地图,设置中心点坐标和地图级别
                        var polyline = new BMapGL.Polyline([
                            new BMapGL.Point(116.299, 39.910),
                            new BMapGL.Point(116.305, 39.920),
                            new BMapGL.Point(116.315, 39.921),
                            new BMapGL.Point(116.325, 39.925),
                            new BMapGL.Point(116.295, 39.870),
                            new BMapGL.Point(116.305, 39.850),
                            new BMapGL.Point(116.355, 39.910),

                        ], {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline); //增加折线

                        var polyline1 = new BMapGL.Polyline([
                            new BMapGL.Point(116.355, 39.910),
                            new BMapGL.Point(116.411, 39.900),
                            new BMapGL.Point(116.404, 39.9310),
                            new BMapGL.Point(116.438, 39.890),
                        ], {
                            strokeColor: 'red',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline1); //增加折线
                        var polyline2 = new BMapGL.Polyline([
                            new BMapGL.Point(116.438, 39.890),
                            new BMapGL.Point(116.475, 39.8910)
                        ], {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline2); //增加折线
                    }
                    if (i == 2) {
                        console.log("i==2")
                        map1.clearOverlays();

                        // longitude and latitude;
                        let start_longitude = 115.8459
                        let start_latitude = 28.69877
                        let range = 1
                        let lines = []
                        let lon = [start_longitude]
                        let lat = [start_latitude]
                        for (let i = 0; i < 12; i++) {
                            lon.push(start_longitude + Math.random() * range - 0.5)
                            lat.push(start_latitude + Math.random() * range - 0.5)
                            // lines.push(new BMapGL.Point(lon[i],lat[i]))
                        }

                        for (let i = 0; i < 4; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline);

                        lines = []
                        for (let i = 3; i < 6; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'red',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline1); //增加折线
                        lines = []
                        for (let i = 5; i < 7; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline1); //增加折线

                        map1.centerAndZoom('南昌市', 10); // 初始化地图,设置中心点坐标和地图级别
                        var bd = new BMapGL.Boundary();
                        bd.get('江西省', function (rs) {
                            var hole = new BMapGL.Polygon(rs.boundaries, {
                                fillColor: 'blue',
                                fillOpacity: 0.2
                            });
                            map1.addOverlay(hole);
                        });
                    }
                    if (i == 3) {
                        map1.clearOverlays();

                        // longitude and latitude;
                        let start_longitude = 117.220155
                        let start_latitude = 31.830798
                        let range = 1
                        let lines = []
                        let lon = [start_longitude]
                        let lat = [start_latitude]
                        for (let i = 0; i < 12; i++) {
                            lon.push(start_longitude + Math.random() * range - 0.5)
                            lat.push(start_latitude + Math.random() * range - 0.5)
                            // lines.push(new BMapGL.Point(lon[i],lat[i]))
                        }

                        for (let i = 0; i < 4; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline);

                        lines = []
                        for (let i = 3; i < 6; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'red',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline1); //增加折线
                        lines = []
                        for (let i = 5; i < 7; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline1); //增加折线

                        map1.centerAndZoom('合肥市', 10); // 初始化地图,设置中心点坐标和地图级别
                        var bd = new BMapGL.Boundary();
                        bd.get('安徽省', function (rs) {
                            var hole = new BMapGL.Polygon(rs.boundaries, {
                                fillColor: 'blue',
                                fillOpacity: 0.2
                            });
                            map1.addOverlay(hole);
                        });
                    }

                    if (i == 4) {
                        map1.clearOverlays();

                        // longitude and latitude;
                        let start_longitude = 112.947195
                        let start_latitude = 28.234635
                        let range = 1
                        let lines = []
                        let lon = [start_longitude]
                        let lat = [start_latitude]
                        for (let i = 0; i < 12; i++) {
                            lon.push(start_longitude + Math.random() * range - 0.5)
                            lat.push(start_latitude + Math.random() * range - 0.5)
                            // lines.push(new BMapGL.Point(lon[i],lat[i]))
                        }

                        for (let i = 0; i < 4; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline);

                        lines = []
                        for (let i = 3; i < 6; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'red',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline1); //增加折线
                        lines = []
                        for (let i = 5; i < 7; i++) {
                            lines.push(new BMapGL.Point(lon[i], lat[i]))
                        }
                        var polyline1 = new BMapGL.Polyline(lines, {
                            strokeColor: 'black',
                            strokeWeight: 5,
                            strokeOpacity: 1.0
                        });
                        map1.addOverlay(polyline1); //增加折线
                        map1.centerAndZoom('长沙市', 10); // 初始化地图,设置中心点坐标和地图级别
                        var bd = new BMapGL.Boundary();
                        bd.get('湖南省', function (rs) {
                            var hole = new BMapGL.Polygon(rs.boundaries, {
                                fillColor: 'blue',
                                fillOpacity: 0.2
                            });
                            map1.addOverlay(hole);
                        });
                    }
                }
            })
        }, 1000)

        let current2 = [0, 0, 0, 0]
        let lastsum = 0
        setInterval(() => {
            let relationObj = document.getElementById('relationObj')
            let i = 0
            let sum = 0
            Array.from(relationObj.children).forEach(item => {
                i++
                const str = item.getAttribute('class')
                if (str.includes('md-checked')) {
                    current2[i] = 1
                    sum += current2[i]


                } else {
                    current2[i] = 0
                }
            })
            if (lastsum != sum) {
                lastsum = sum
                console.log(current2, lastsum, sum)
                map1.clearOverlays();
                if (current2[1] == 1) {
                    var polyline = new BMapGL.Polyline([
                        new BMapGL.Point(116.299, 39.910),
                        new BMapGL.Point(116.305, 39.920),
                        new BMapGL.Point(116.404, 39.9310),
                        new BMapGL.Point(116.475, 39.8910)
                    ], {
                        strokeColor: 'white',
                        strokeWeight: 5,
                        strokeOpacity: 1.0
                    });
                    map1.addOverlay(polyline); //增加折线
                    map1.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14); // 初始化地图,设置中心点坐标和地图级别
                }
                if (current2[2] == 1) {
                    var polyline = new BMapGL.Polyline([
                        new BMapGL.Point(116.249, 39.900),
                        new BMapGL.Point(116.325, 39.930),
                        new BMapGL.Point(116.315, 39.921),
                        new BMapGL.Point(116.394, 39.9410),
                        new BMapGL.Point(116.465, 39.8110)
                    ], {
                        strokeColor: 'blue',
                        strokeWeight: 5,
                        strokeOpacity: 1.0
                    });
                    map1.addOverlay(polyline); //增加折线
                    map1.centerAndZoom(new BMapGL.Point(116.404, 39.915), 13); // 初始化地图,设置中心点坐标和地图级别
                }
                if (current2[3] == 1) {
                    var polyline = new BMapGL.Polyline([
                        new BMapGL.Point(116.149, 39.970),
                        new BMapGL.Point(116.225, 39.910),
                        new BMapGL.Point(116.469, 39.8110),
                        new BMapGL.Point(116.215, 39.911),
                        new BMapGL.Point(116.414, 39.9610),
                    ], {
                        strokeColor: 'yellow',
                        strokeWeight: 5,
                        strokeOpacity: 1.0
                    });
                    map1.addOverlay(polyline); //增加折线
                    map1.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
                }
                if (current2[4] == 1) {
                    var polyline = new BMapGL.Polyline([
                        new BMapGL.Point(116.109, 39.970),
                        new BMapGL.Point(116.305, 39.891),
                        new BMapGL.Point(116.125, 39.900),
                        new BMapGL.Point(116.509, 39.840),
                        new BMapGL.Point(116.404, 39.9310),
                    ], {
                        strokeColor: 'red',
                        strokeWeight: 5,
                        strokeOpacity: 1.0
                    });
                    map1.addOverlay(polyline); //增加折线
                    map1.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
                }
            }
        }, 1000)

    }
    window.onload = loadJScript; // 异步加载地图
</script>

</html>